import React, { Component } from "react";
import Footer from "components/Footer";
import "./center.less";
import avatar from "img/avatar.png";
import { Link } from "react-router-dom";
import { updatePhone } from "redux/index";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    console.log(this.props.phone);
    return (
      <div className="my-center">
        <div className="header flex aic pt-20 pb-20">
          <img className="avatar ml-30" src={avatar} alt="" />
          {this.props.phone ? (
            <p className="ml-10 fff f16">{this.props.phone}</p>
          ) : (
            <Link className="ml-10 fff f16" to="/login">
              立即登录
            </Link>
          )}
        </div>
        <div className="bg-fff pl-15 pr-15">
          <div className="item mt-10 bg-fff flex aic jc-sb">
            <span>我的订单</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </div>
          <div className="item bg-fff flex aic jc-sb">
            <span>我的共享卡</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </div>
          <div className="item bg-fff flex aic jc-sb">
            <span>我的优惠劵</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </div>
          <Link
            to="/my/love"
            className="item bg-fff flex aic jc-sb"
            href="/my/love"
          >
            <span>我想去</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </Link>
          <Link
            to="/my/zuji"
            className="item bg-fff flex aic jc-sb"
            href="/my/browse"
          >
            <span>我的足迹</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </Link>
          <Link to="" className="item bg-fff flex aic jc-sb" href="/my/set">
            <span>设置</span>
            <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </Link>
        </div>

        <Footer activeIndex={5} />
      </div>
    );
  }
}

// export default Index;

function mapStateToProps(state) {
  return {
    phone: state.phone,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    updatePhone: bindActionCreators(updatePhone, dispatch),
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Index);
